<template>
	<view class="list">
		<view class="fixbg" :style="{backgroundImage:`url(${playList.coverImgUrl})`}"></view>
		
		<Header title='歌单'/>
		
		<view class="scrollContainer" v-show="loading">
			<scroll-view scroll-y="true" >
				<view class="list-head">
					<view class="list-head-img">
						<image :src="playList.coverImgUrl" mode=""></image>
						<view class="list-head-img-icon">
							<text class="iconfont">&#xea6d;</text>
							<text>{{playList.playCount | formatCount}}</text>
						</view>
					</view>
					
					<view class="list-head-text">
						<view>{{playList.name}}</view>
						<view>
							<image :src="playList.creator.avatarUrl" mode=""></image>
							<text>{{playList.creator.nickname}}</text>
						</view>
						<view>
							{{playList.description}}
						</view>
					</view>
				</view>
				
				<!-- #ifdef MP-WEIXIN -->
					<button class="list-share" open-type="share">
						<text class="iconfont">&#xe618;</text>分享给微信好友
					</button>
				<!-- #endif -->
				
				<view class="list-music">
					<view class="list-music-head">
						<text class="iconfont">&#xe61d;</text>
						<text>播放全部</text>
						<text>(共{{playList.trackCount}}首)</text>
					</view>
					
					<view class="list-music-item" v-for='(item,ind) in playList.tracks' :key='item.id' @tap='handleToDetail(item.id)'>
						<view class="list-music-item-top">
							{{ind + 1}}
						</view>
						<view class="list-music-item-song">
							<view>
								{{item.name}}
							</view>
							<view>
								<image v-if="privileges[ind].flag > 60" src="../../static/dujia.png" mode=""></image>
								<image class="sq" v-if="privileges[ind].maxbr == 999000" src="../../static/sq.png" mode=""></image>
								{{item.ar[0].name}} - {{item.name}}
							</view>
						</view>
						
						<text class="iconfont">&#xe610;</text>
					</view>
				</view>
	
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {baseUrl} from '../../common/config.js'
	export default {
		data() {
			return {
				listId:'',
				playList:{
					coverImgUrl:'',
					creator:{
						avatarUrl:''
					}
				},
				privileges:[],
				loading:false
			}
		},
		onLoad(options) {
			uni.showLoading({
			    title: '正在加载中...'
			});
			this.listId = options.id
			this.getlistData()
			
		},
		methods: {
			getlistData(){
				const url = `${baseUrl}/playlist/detail?id=${this.listId}`
				uni.$u.http.get(url).then((res)=>{
					if(res.data.code == 200) {
						this.playList = res.data.playlist
						this.privileges = res.data.privileges
						
						this.$store.commit('INIT_TOPLISTIDS',res.data.playlist.trackIds)
					}
				}).finally(()=>{
					this.loading = true
					uni.hideLoading()
				})
			},
			handleToDetail(id){
				uni.navigateTo({
					url: '/pages/detail/detail?songId='+ id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.list-head {
		display: flex;
		margin: 30rpx;
		
		&-img {
			width: 264rpx;
			height: 264rpx;
			border-radius: 30rpx;
			overflow: hidden;
			position: relative;
			margin-right: 42rpx;
			
			& image {
				width: 100%;
				height: 100%;
			}
			
			&-icon {
				position: absolute;
				right: 8rpx;
				top: 8rpx;
				color: white;
				font-size: 26rpx;
			}
		}
		
		&-text {
			flex: 1;
			color: #f0f2f7;
			
			& view:nth-child(1) {
				color: white;
				font-size: 34rpx;
			}
			
			& view:nth-child(2) {
				display: flex;
				margin: 20rpx 0;
				font-size: 24rpx;
				align-items: center;
				
				& image {
					width: 54rpx;
					height: 54rpx;
					border-radius: 50%;
					margin-right: 14rpx;
				}
			}
			
			& view:nth-child(3) {
				line-height: 34rpx;
				font-size: 22rpx;
			}
		}
	}
	
	.list-share {
		width: 330rpx;
		height: 74rpx;
		margin: 0 auto;
		background: rgba(0,0,0,0.4);
		border-radius: 37rpx;
		color: white;
		text-align:center;
		line-height: 74rpx;
		font-size: 28rpx;
		& text {
			margin-right: 16rpx;
		}
	}
	
	.list-music {
		background: white;
		border-radius: 50rpx 50rpx 0 0;
		margin-top: 40rpx;
		overflow: hidden;
		
		&-head {
			height: 50rpx;
			margin: 30rpx 0 70rpx 22rpx;;
			
			& text:nth-child(1) {
				height: 50rpx;
				font-size: 50rpx;
			}
			
			& text:nth-child(2) {
				font-size: 30rpx;
				margin: 0 10rpx 0 26rpx;
			}
			
			& text:nth-child(3) {
				font-size: 26rpx;
				color: #b2b2b2;
			}
		}
		
		&-item {
			display: flex;
			margin: 0 32rpx 66rpx 46rpx;
			align-items: center;
			color:#959595;
			
			&-top {
				width: 58rpx;
				font-size: 30rpx;
				line-height: 30rpx;
			}
			
			&-song {
				flex: 1;
				
				& view:nth-child(1) {
					font-size: 28rpx;
					color: black;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				
				& view:nth-child(2) {
					//不去调flex省略号出不来，去掉flex图片对不齐
					display: flex;
					font-size: 20rpx;
					align-items: center;
					width: 70vw;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					
					& image {
						width: 32rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}
				}
			}
			
			& text {
				font-size: 50rpx;
				color: #c7c7c7;
			}
		}
	}
</style>
